iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
1
Mobile Development

30天用React native製作app!!系列 第 19

[蚊子的Day19]Hook介紹~React Native

  • 分享至 

  • xImage
  •  

狀態變數state是記錄App內各種狀態的重要工具,今天就來講講要如何使用吧~

狀態變數是一種特殊變數,一旦被修改,使用該變數的元件會被重新渲染,是近代前端框架用來增加畫面渲染效率與避免畫面資料不一致的最重要技術。早期React Native在宣告元件的時候,都必須使用Class元件,以Class宣告的元件才具有狀態變數state,可用來處理資料,而Functional元件只能用來渲染畫面。但比起Functional元件,Class元件架構複雜且執行效率差,所以後來React Native官方就建議除了需要處理資料的元件,其他都用Functional元件。

Hook的使用

Hook是React 16.8中增加的新機制,它讓我們用Functional元件就能使用state以及其他React的功能。
基礎的Hook有三種:

  • useState
  • useContext
  • useEffect
    要使用時須先將這些元件import進檔案裡:
    import React, { useContext, useState, useEffect } from "react";
    

useState

useState是React提供的一種用來存取狀態變數的一種Hook機制。
useState回傳一個狀態變數複製品,以及更新狀態變數的函數,必需以const宣告取得的狀態變數副本。

const [state, setState] = useState(initialState);

如果要更改狀態變數的值則要透過setState

setState(newState)

useContext

利用useContext可以設定全域變數,用法在下篇詳細介紹

useEffect

使用useEffect可偵測某項狀態的改變進而重新渲染畫面,useEffect的用法之後也會有篇幅詳細介紹


上一篇
[蚊子的Day18]常數的使用~React Native
下一篇
[蚊子的Day20]全域變數的使用~React Native
系列文
30天用React native製作app!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言